<template>
  <atom-search-input
    ref="input"
    v-model.trim="searchValue"
    placeholder="请输入股票名称"
    is-show-searching
    is-show-cancel
    @click.native.stop
    @click-cancel="back"
  >
    <template #searching>
      <div class="search-container" :style="`height: calc(100vh - 1rem - ${placeholderHeight});`">
        <div
          class="searching-item"
          v-for="item in searchData"
          :key="item.stockCode"
          @click.stop="rowClick({ stockCode: item.stockCode, marketId: item.marketId, stockName: item.stockName })"
        >
          <div class="stock-content">
            <div class="stock-info">
              <div class="searching-item__name" v-html="item.stockNameContent"></div>
              <div class="searching-item__code__container">
                <atom-tag color="yellow">{{ item.marketName }}</atom-tag>
                <div class="searching-item__code" v-html="item.stockCodeContent"></div>
              </div>
            </div>
          </div>
          <template v-if="type === 'ztjk'">
            <img
              src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/6d565ac7-7372-487c-82f6-117718019629.png"
              alt=""
              v-if="!noticeStockCodes.includes(item.stockCode)"
              @click.stop="changeNotice(item.stockCode, true)"
              class="button"
            />
            <img
              src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/fec5037a-bae8-4ecd-8518-3945bd946eb0.png"
              alt=""
              v-else
              @click.stop="changeNotice(item.stockCode, false)"
              class="button"
            />
          </template>
        </div>
        <div v-if="tips" class="tips">
          {{ tips }}
        </div>
      </div>
    </template>
  </atom-search-input>
</template>

<script>
import { reqBase } from '@/apis/index';
import { errorReport, highLight } from '@/scripts/tools.js';
import { Dialog } from '@atom/atom-ui';
export default {
  inject: ['headerPlaceholderHeight'],
  data() {
    return {
      type: 'ztjy',
      noticeStockCodes: [],
      tips: '',
      searchValue: '',
      searchData: [],
    };
  },
  computed: {
    placeholderHeight() {
      return this.headerPlaceholderHeight();
    },
  },
  methods: {
    // 点击行事件
    rowClick({ stockCode, marketId, stockName }) {
      // 跳转到限售详情页面
      this.$router.push({
        path: '/limitDetails',
        query: {
          stockcode: stockCode,
          marketid: marketId,
          name: stockName,
          activeTabName: 'ztjy',
          screenMode: window.getParam('screenMode'),
        },
      });
    },
    // 获取基本信息
    getBase() {
      // 调用获取关注股票的接口
      reqBase({ op: 'getEstimateLimitUpStock' })
        .then(res => {
          // 获取关注股票列表
          const { monitorStockList } = res.data;
          monitorStockList.forEach(item => {
            this.noticeStockCodes.push(item.stockCode);
          });
        })
        .catch(err => {
          // 报错报告
          errorReport({
            name: `搜索页面，获取关注列表接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    // 搜索结果
    getSearchResult(searchValue) {
      // 调用搜索股票的接口
      reqBase({ op: 'searchStock', pattern: searchValue })
        .then(res => {
          // 获取搜索结果
          this.searchData = [];
          const searchData = [];
          res.data.forEach(item => {
            searchData.push({
              stockNameContent: highLight(item.stockName, searchValue, '#FF2436'),
              stockCodeContent: highLight(item.stockCode, searchValue, '#FF2436'),
              stockCode: item.stockCode,
              stockName: item.stockName,
              marketId: item.marketId,
              marketName: item.marketName,
            });
          });
          this.searchData.push(...searchData);
          this.$refs.input.isShowSearchingNoData = !this.searchData.length;
        })
        .catch(err => {
          // 报错报告
          errorReport({
            name: `涨停基因搜索接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    // 关注与取消关注
    changeNotice(stockCode, status) {
      // 调用关注与取消关注的接口
      const op = status ? 'setStockMonitor' : 'cancelStockMonitor';
      if (status) {
        const MAXNUM = 30;
        if (this.noticeStockCodes.length >= MAXNUM) {
          Dialog.alert({
            title: '提示',
            message: '最多监控30只股票，请清理已关注个股再添加新的股票',
            isTextCenter: true,
          });
          return;
        }
      }
      reqBase({ op, stockCode })
        .then(() => {
          // 关注
          if (status) {
            this.noticeStockCodes.push(stockCode);
          } else {
            // 取消关注
            this.noticeStockCodes = this.noticeStockCodes.filter(item => item !== stockCode);
          }
        })
        .catch(err => {
          // 报错报告
          this.$toast('关注失败');
          errorReport({
            name: `搜索框关注接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    // 返回
    back() {
      // 返回上一页
      this.$router.back();
    },
  },
  created() {
    this.type = this.$route.query.type;
    if (this.type === 'ztjy') {
      this.tips = '因风险控制及合规要求，本功能暂不支持ST股票的涨停基因计算，敬请谅解！';
    }
  },
  mounted() {
    // 自动聚焦
    this.$refs.input.$el.querySelector('input').focus();
    if (this.type === 'ztjk') {
      this.getBase();
    }
  },
  watch: {
    searchValue(nval) {
      this.getSearchResult(nval);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.search-container {
  width: 100vw;
  overflow-y: auto;

  .searching-item {
    position: relative;
    width: 90%;
    height: 104px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-bottom: 1px solid #e8e8e8;
    }

    .stock-content {
      display: flex;
      align-items: center;

      .stock-info {
        display: flex;
        flex-direction: column;

        .searching-item__name {
          font-family: PingFangSC-Regular;
          font-size: 32px;
          color: #323232;
          letter-spacing: 0;
          line-height: 40px;
          font-weight: 400;
        }
        .searching-item__code__container {
          display: flex;
          margin-top: 8px;
          .searching-item__code {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            line-height: 30px;
            font-weight: 400;
            margin-left: 12px;
          }
        }
      }
    }

    .button {
      width: 48px;
      height: 48px;
    }
  }

  .tips {
    width: 95vw;
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #999;
    line-height: 32px;
    font-weight: 400;
  }
}
</style>
